<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小红书数据管理系统 - 数据大屏</title>
<script type="text/javascript" src="static/js/echarts.min.js"></script>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<style>
body {
    background: #000d4a url({{ url_for('static', filename='img/bg.jpg') }}) center top;
    color: #fff;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-width: 1200px;
}

.loading {
    position: fixed;
    left: 0;
    top: 0;
    font-size: 18px;
    z-index: 100000000;
    width: 100%;
    height: 100%;
    background: #1a1a1c;
    text-align: center;
}

.loadbox {
    position: absolute;
    width: 160px;
    height: 150px;
    color: #aaa;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -75px;
}

.loadbox img {
    margin: 10px auto;
    display: block;
    width: 40px;
}

.head {
    height: 90px;
    background: url({{ url_for('static', filename='img/head_bg.png') }}) no-repeat center center;
    position: relative;
}

.head h1 {
    color: #fff;
    text-align: center;
    font-size: 38px;
    line-height: 90px;
    letter-spacing: 2px;
    font-weight: bold;
    text-shadow: 0 0 15px rgba(0, 198, 255, 0.5);
    margin: 0;
}

.weather {
    position: absolute;
    right: 30px;
    top: 0;
    line-height: 90px;
}

.back {
    position: absolute;
    left: 30px;
    top: 0;
    line-height: 90px;
}

.back a {
    color: #fff;
    text-decoration: none;
}

.mainbox {
    padding: 10px 20px;
}

.mainbox:after, .main-wrap:after {
    display: block;
    content: "";
    clear: both;
}

.mainbox .boxall {
    padding: 0 20px 20px;
    position: relative;
    z-index: 10;
    margin-bottom: 20px;
}

.mainbox .boxall:before, .mainbox .boxall:after {
    position: absolute;
    width: 20px;
    height: 20px;
    content: "";
    border-top: 2px solid #02a6b5;
    top: 0;
}

.mainbox .boxall:before {
    border-left: 2px solid #02a6b5;
    left: 0;
}

.mainbox .boxall:after {
    border-right: 2px solid #02a6b5;
    right: 0;
}

.alltitle {
    font-size: 18px;
    line-height: 40px;
    color: #fff;
    position: relative;
    margin-bottom: 10px;
    padding-left: 15px;
}

.alltitle:before {
    position: absolute;
    width: 5px;
    height: 20px;
    content: "";
    background: #49bcf7;
    border-radius: 20px;
    left: 0;
    top: 10px;
}

.navboxall {
    height: 100%;
}

/* 数据展示卡片样式 */
.data-card {
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    box-shadow: 0 0 10px rgba(2, 166, 181, 0.3);
    background-color: rgba(6, 30, 93, 0.5);
}

.data-card .card-value {
    font-size: 28px;
    font-weight: bold;
    margin: 10px 0;
    color: #fff;
}

.data-card .card-title {
    font-size: 14px;
    color: #7ab5d6;
}

.data-card .card-icon {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 30px;
    opacity: 0.2;
}

li {
    list-style: none;
    float: left;
}

.wrap {
    height: 280px;
    overflow: hidden;
    position: relative;
}

.scroll-list {
    animation: scroll 25s linear infinite;
}

.scroll-list:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

.wrap li {
    line-height: 40px;
    height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    float: none;
    transition: all 0.3s;
    position: relative;
}

.wrap li:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.02);
    z-index: 10;
    box-shadow: 0 0 10px rgba(0, 198, 255, 0.3);
}

.wrap li p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    font-size: 13px;
    text-indent: 20px;
    margin: 0;
}

.wrap li p span {
    width: 25%;
    display: inline-block;
    text-align: center;
}

.wraptit {
    color: #7a98bc;
    font-size: 14px;
    line-height: 40px;
    height: 40px;
    width: 100%;
    margin-bottom: 10px;
}

.wraptit span {
    width: 25%;
    display: inline-block;
    text-align: center;
}

.clearfix:after {
    display: block;
    content: "";
    clear: both;
}

.clearfix li {
    margin-bottom: 0;
    padding: 0 10px;
    box-sizing: border-box;
}

.grid-row {
    display: flex;
    justify-content: space-between;
    margin: 0 -10px;
}

.grid-row .col-50 {
    width: 50%;
}

.grid-row .col-33 {
    width: 33.33%;
}

.grid-row .col-25 {
    width: 25%;
}

ul {
    padding: 0;
    margin: 0;
}
</style>
</head>
<body>
<div class="loading">
    <div class="loadbox">
        <img src="{{ url_for('static', filename='img/loading.gif') }}">页面加载中...
    </div>
</div>
<div class="head">
    <h1>小红书数据可视化分析大屏</h1>
    <div class="weather">
        <span id="showTime"></span>
    </div>
    <div class="back">
        <a href="/">
            <i class="fas fa-arrow-left"></i> 返回系统
        </a>
    </div>
</div>
<script>
var t = null;
t = setTimeout(time, 1000); // 开始运行
function time() {
    clearTimeout(t); // 清除定时器
    dt = new Date();
    var y = dt.getFullYear();
    var mt = dt.getMonth() + 1;
    var day = dt.getDate();
    var h = dt.getHours(); // 获取时
    var m = dt.getMinutes(); // 获取分
    var s = dt.getSeconds(); // 获取秒
    document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
    t = setTimeout(time, 1000); // 设定定时器，循环运行
}
</script>
<div class="mainbox">
    <!-- 第一行: 数据统计卡片 -->
    <div class="grid-row clearfix">
        <li class="col-25">
            <div class="data-card">
                <div class="card-title">笔记总数</div>
                <div class="card-value">{{ data.stats.total_notes }}</div>
                <div class="card-icon"><i class="fas fa-book"></i></div>
            </div>
        </li>
        <li class="col-25">
            <div class="data-card">
                <div class="card-title">评论总数</div>
                <div class="card-value">{{ data.stats.total_comments }}</div>
                <div class="card-icon"><i class="fas fa-comment"></i></div>
            </div>
        </li>
        <li class="col-25">
            <div class="data-card">
                <div class="card-title">用户总数</div>
                <div class="card-value">{{ data.stats.total_users }}</div>
                <div class="card-icon"><i class="fas fa-users"></i></div>
            </div>
        </li>
       
    </div>
    
    <!-- 第二行: 左侧笔记类型和右侧数据统计 -->
    <div class="grid-row clearfix">
        <li class="col-50">
            <!-- 左侧柱形图：笔记类型分布 -->
            <div class="boxall" style="height:350px">
                <div class="alltitle">笔记类型分布</div>
                <div class="navboxall" id="echartKeywords"></div>
            </div>
        </li>
        <li class="col-50">
            <!-- 右侧柱形图：数据统计 -->
            <div class="boxall" style="height:350px">
                <div class="alltitle">数据量对比</div>
                <div class="navboxall" id="echartStats"></div>
            </div>
        </li>
    </div>
    
    <!-- 第三行: 左侧地理位置和右侧最新笔记 -->
    <div class="grid-row clearfix">
        <li class="col-50">
            <!-- 左下角饼图：地理位置分布 -->
            <div class="boxall" style="height:360px">
                <div class="alltitle">地理位置分布</div>
                <div class="navboxall" id="echartLocations"></div>
            </div>
        </li>
        <li class="col-50">
            <!-- 右下角滚动最新笔记 -->
            <div class="boxall" style="height:360px;">
                <div class="alltitle">最新笔记列表</div>
                <div class="navboxall">
                    <div class="wraptit">
                        <span>标题</span>
                        <span>作者</span>
                        <span>点赞数</span>
                        <span>评论数</span>
                    </div>
                    <div class="wrap">
                        <ul class="scroll-list">
                            {% for note in data.recent_notes %}
                            <li>
                                <p>
                                    <span>{{ note.title|truncate(20) }}</span>
                                    <span>{{ note.author }}</span>
                                    <span>{{ note.likes|default(0) }}</span>
                                    <span>{{ note.comments|default(0) }}</span>
                                </p>
                            </li>
                            {% endfor %}
                            <!-- 复制前面的记录用于无缝滚动 -->
                            {% for note in data.recent_notes[:5] %}
                            <li>
                                <p>
                                    <span>{{ note.title|truncate(20) }}</span>
                                    <span>{{ note.author }}</span>
                                    <span>{{ note.likes|default(0) }}</span>
                                    <span>{{ note.comments|default(0) }}</span>
                                </p>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </div>
</div>

<script>
// 等待页面加载完成后隐藏加载动画
window.onload = function() {
    $(".loading").fadeOut();
}

// 设置自动滚动 - 替换为CSS动画
$(function() {
    // 自适应列表长度的动画时间
    var itemCount = $('.scroll-list li').length;
    var animationDuration = Math.max(itemCount * 2, 15); // 最少15秒，每项2秒
    $('.scroll-list').css('animation-duration', animationDuration + 's');
    
    // 鼠标悬停暂停滚动
    $('.wrap').hover(function() {
        $('.scroll-list').css('animation-play-state', 'paused');
    }, function() {
        $('.scroll-list').css('animation-play-state', 'running');
    });
});

// 初始化图表
var echarts1 = echarts.init(document.getElementById('echartLocations'));
var echarts2 = echarts.init(document.getElementById('echartStats'));
var echarts3 = echarts.init(document.getElementById('echartKeywords'));

// 饼图：地理位置分布
var option1 = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        top: '5%',
        left: 'center',
        textStyle: { color: '#fff' }
    },
    series: [{
        name: '位置分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
            borderRadius: 10,
            borderColor: '#0c2135',
            borderWidth: 2
        },
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
            }
        },
        labelLine: {
            show: false
        },
        data: [
            {% for location in data.location_stats %}
            { value: {{ location.count }}, name: '{{ location.location_name }}' },
            {% endfor %}
        ]
    }]
};

// 柱状图：数据统计
var option2 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['笔记数量', '评论数量', '用户数量'],
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.5)'
            }
        },
        axisLabel: {
            color: 'rgba(255,255,255,0.8)',
            fontSize: 12
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.5)'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.1)'
            }
        },
        axisLabel: {
            color: 'rgba(255,255,255,0.8)',
            fontSize: 12
        }
    },
    series: [{
        data: [
            { value: {{ data.stats.total_notes }}, itemStyle: { color: '#3498db' } },
            { value: {{ data.stats.total_comments }}, itemStyle: { color: '#2ecc71' } },
            { value: {{ data.stats.total_users }}, itemStyle: { color: '#e74c3c' } }
        ],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.1)'
        },
        barWidth: '40%',
        label: {
            show: true,
            position: 'top',
            formatter: '{c}',
            color: '#fff'
        }
    }]
};

// 柱状图：关键词分布
var option3 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: [
            {% for keyword in data.keyword_stats[:8] %}
            '{{ keyword.keyword }}',
            {% endfor %}
        ],
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.5)'
            }
        },
        axisLabel: {
            color: 'rgba(255,255,255,0.8)',
            fontSize: 12,
            interval: 0,
            rotate: 30
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.5)'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.1)'
            }
        },
        axisLabel: {
            color: 'rgba(255,255,255,0.8)',
            fontSize: 12
        }
    },
    series: [{
        data: [
            {% for keyword in data.keyword_stats[:8] %}
            { 
                value: {{ keyword.count }}, 
                itemStyle: { 
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#0050b3' }
                    ])
                }
            },
            {% endfor %}
        ],
        type: 'bar',
        barWidth: '50%',
        label: {
            show: true,
            position: 'top',
            formatter: '{c}',
            color: '#fff'
        }
    }]
};

// 应用图表配置
echarts1.setOption(option1);
echarts2.setOption(option2);
echarts3.setOption(option3);

// 图表调整
window.addEventListener('resize', function() {
    echarts1.resize();
    echarts2.resize();
    echarts3.resize();
});
</script>
</body>
</html> 